<template>
	<view class="page">
		<view class="box-content">
			<view class="imags-list">
				<image :src="item" @click="lookImgs(item)" v-for="(item,index) in imags" :key="index" mode="aspectFill"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	import publicData from './public.js'
	export default{
		data(){
			return{
				imags:[]
			}
		},
		onLoad() {
			this.imags = publicData.Imags
		},
		methods:{
			lookImgs(item){
				uni.previewImage({
					current:item,
					urls:this.imags
				});
			}
		}
	}
</script>

<style lang="scss">
	.page{
		background-color: #F5F7F8;
	}
	.img-types{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
		overflow: hidden;
		overflow-x: scroll;
		.item-type{
			flex: 0 0 auto;
			padding: 0 22rpx;
			height: 60rpx;
			background: #E9E9E9;
			border-radius: 10rpx;
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #343434;
			line-height: 60rpx;
			margin-right: 20rpx;
		}
		.select-style{
			border: 2rpx solid #F05D40;
			background-color: #F4E5E3;
			color: #F05D40;
		}
	}
	.imgs-top{
		width: 100%;
		height: 420rpx;
		margin-top: 30rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.imgs-num-title{
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #343434;
		margin-top: 30rpx;
		margin-bottom: 10rpx;
	}
	.imags-list{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		image{
			flex:0 0 auto;
			width: 329rpx;
			height: 200rpx;
			margin-bottom: 30rpx;
		}
	}
</style>